<!-- 终端监控详细信息 -->
<template>
  <bs-dialog :title="$t('终端监控详细信息')" :visible.sync="editor" size="default" @closed="doCloseEdit" @opened="doLoadDeviceLayout" class="deviceDialog">
    <template slot="main">
      <div v-if="editor">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$t('基本属性')" name="first">
            <basic-set-info :editor-form="editorForm"></basic-set-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('终端状态')" name="second">
            <device-state-info :editor-form="editorForm"></device-state-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('屏幕监控')" name="thread">
            <screen-status :id="terminalId" :device-widget-data="deviceWidgetData"></screen-status>
          </el-tab-pane>
          <el-tab-pane :label="$t('播放监控')" name="four">
            <paly-monitor-info :id="terminalId"></paly-monitor-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('文件监控')" name="five">
            <file-monitor-info :id="terminalId"></file-monitor-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('命令监控')" name="six">
            <command-monitor-info :id="terminalId"></command-monitor-info>
          </el-tab-pane>
          <el-tab-pane :label="$t('终端日志')" name="seven">
            <device-log-info :mac="editorForm.macText"></device-log-info>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template slot="footer">
      <bs-refresh-button-icon :show-icon="false" @click.native="doRefresh"></bs-refresh-button-icon>
      <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import BasicSetInfo from "./BasicSetInfo"
import DeviceStateInfo from './DeviceStateInfo'
import ScreenStatus from './ScreenStatus'
import PalyMonitorInfo from './PalyMonitorInfo'
import FileMonitorInfo from './FileMonitorInfo'
import CommandMonitorInfo from './CommandMonitorInfo'
import DeviceLogInfo from './DeviceLogInfo'
import ScreenApi from '@/api/screen'

export default {
  name: 'DeviceInfoDialog',
  data() {
    return {
      activeName: 'first',
      editor: false,
      editorForm: {},
      terminalId: 0,
      deviceWidgetData: {}
    }
  },
  created() {
    this.$eventBus.$on('deviceInfoDialogShow', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('deviceInfoDialogShow');
  },
  components: {
    BasicSetInfo,
    DeviceStateInfo,
    ScreenStatus,
    PalyMonitorInfo,
    FileMonitorInfo,
    CommandMonitorInfo,
    DeviceLogInfo
  },
  methods: {
    // 显示
    show(form, id) {
      this.terminalId = id
      this.editorForm = form
      // this.activeName = 'first'
      this.editor = true
    },
    // 关闭
    doCloseEdit: function () {
      this.deviceWidgetData = null
      this.editor = false;
      // 清除文件
      this.$store.dispatch('device/saveWebsocketData', `{'cmd': 23, 'data': ''}`)
      // 清除屏幕
      this.$store.dispatch('device/saveWebsocketData', `{'cmd': 36, 'data': ''}`)
      this.$eventBus.$emit('doCancelAllSize')
    },
    handleDrag() {
      this.$refs.select.blur()
    },
    doRefresh() {
      // this.activeName = 'first'
      if(this.activeName == 'first'){
        this.$eventBus.$emit('doStateInfo')
      }else if(this.activeName == 'second') {
        this.$eventBus.$emit('doStateInfo')
      }else if(this.activeName == 'thread') {
        this.$eventBus.$emit('doRefreshScreen')
      }else if(this.activeName == 'four') {
        this.$eventBus.$emit('doPlayMonitorInfoRefresh')
      }else if(this.activeName == 'five') {

      }else if(this.activeName == 'six') {
        this.$eventBus.$emit('doCommandMonitorInfoRefresh',{page:1})
      } else if(this.activeName == 'seven') {
        this.$eventBus.$emit('doDeviceLogRefresh')
      }
      this.$message.success('刷新成功')
    },
    // 加载屏幕布局
    async doLoadDeviceLayout() {
        try{
            const twres = await ScreenApi.loadDeviceLayout({terminalId: this.terminalId})
            if(twres) {
                this.deviceWidgetData = twres
            } else {
                this.deviceWidgetData = {}
            }

        }catch(error){this.deviceWidgetData = []}
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    width: 800px !important;
    height: 650px !important;
}
</style>
